<template>
  <view>
    <mySearch @click="gotoSearch"></mySearch>
    <view class="cate-cantanier">
      <!-- 左侧 -->
      <scroll-view scroll-y="true" class="cate-left" :style="{height:wh+'px'}">
       <block v-for="(item,index) in cateList" :key="item.cat_id" >
         <view :class="['cate-left-item',index===active?'active':'']" @click="activeHandler(index)">{{item.cat_name}}</view>
       </block>
      </scroll-view>
      <!-- 右侧 -->
   <scroll-view scroll-y="true"  class="cate-right" :style="{height:wh+'px'}">
     <view class="cate-right-item" v-for="item in cateLv2List" :key="item.cat_id" >
       <view class="item-title">/{{item.cat_name}}/</view>
      <view class="item-list">
        <view class="cate-lv3-item" v-for="item2 in item.children" :key="item2.cat_id"  @click="gotoGoodsList(item2)">
          <image :src="item2.cat_icon"></image>
          <text>{{item2.cat_name}}</text>
        </view>
      </view>
     </view>
   </scroll-view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixin/tabbar-badge.js'
  export default {
    mixins:[badgeMix],
    data() {
      return {
        wh:0,
        cateList:[],
        active:0,
        cateLv2List:[]
      };
    },
    onLoad() {
      const wHeight=uni.getSystemInfoSync()
      this.wh=wHeight.windowHeight-50
      this.getcateList()
    },
    methods:{
      async getcateList() {
        const {data:res} = await uni.$http.get('/api/public/v1/categories')
        if(res.meta.status!==200) return uni.$showMsg()
        this.cateList=res.message
        this.cateLv2List=this.cateList[0].children
      },
      activeHandler(index) {
        this.active=index
        this.cateLv2List=this.cateList[index].children
      },
      gotoGoodsList(item2) {
        uni.navigateTo({
            url: '/subpkg/good_list/good_list?cid=' + item2.cat_id
          })
      },
      gotoSearch(){
        uni.navigateTo({
          url:'/subpkg/Search/Search'
        })
      }
    }
  }
</script>

<style lang="scss">
.cate-cantanier {
  display: flex;
  .cate-left {
    width: 120px;
  }
  .cate-left-item {
    line-height: 60px;
    background-color: #FFFFFF;
    font-size: 12px;
    text-align: center;
    &.active {
     background-color: #ffffff;
     position: relative;
     &:before {
       display: block;
       content: ' ';
       position: absolute;
       top:50%;
       left:0;
       transform: translateY(-50%);
       background-color: #c00000;
       width: 3px;
       height: 60px;
       
     }
    }
  }
  .item-title {
    font-weight: 700;
  text-align: center;
  font-size: 12px;
  padding: 15px 0;
  }
  .item-list {
    display: flex;
    flex-wrap: wrap;
    .cate-lv3-item {
      width: 33.3%;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-bottom: 10px;
      image {
        width: 60px;
        height: 60px;
        
      }
      text {
        font-size: 12px;
      }
    }
  }
}

</style>
